<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none
        }
    </style>
</head>

<body>
    <!-- <button>发送请求</button> -->
    <!-- <div></div> -->
    <!-- <input type="text">
    <list></list>
    <script src="./js/jquery-3.6.0.js"></script> -->
    <!-- <script src="./js/myAjax.js"></script> -->
    <script>
        // let list = document.querySelector('list')

        // function fn(resp) {
        //     let html = ''
        //     resp.s.forEach(element => {
        //         html += `<li>${element}</li>`
        //     });
        //     list.innerHTML = html
        //     $('li').on('click', function() {
        //         $('input').val(`${$(this)[0].innerText}`)
        //         $('list').empty()
        //     })
        // }
        $(() => {
            // $('input').on('keyup', function() {
            //         let tex = $(this).val()
            //         let script = document.createElement('script')
            //         $('script').attr('src', `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${tex}&cb=fn`)
            //         document.body.appendChild(script)
            //     })
            // get请求
            /* $('button').click(() => {
                    // 创建XMLHttpRequest对象
                    let xhr = new XMLHttpRequest()
                        // 打开链接
                        // method
                        // url
                        // 是否异步 默认异步
                    xhr.open('get', 'http://*?id=2')
                        // 发送请求
                    xhr.send()
                        // 监听状态
                    xhr.onreadystatechange = function() {
                        // 判断状态值 0-4 
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                let resp = JSON.parse(xhr.responseText)
                                $('body').add('div').append('ID是:' + resp.id + ', 消息是:' + resp.title)
                            }
                        }
                    }
                }) */
            // POST
            /* $('button').on('click', () => {
                let xhr = new XMLHttpRequest()
                xhr.open('post', 'http://*')
                    // 设置请求头
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                xhr.send("name=cyan&age=18&money=123456")
                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let resp = JSON.parse(xhr.responseText)
                        $('body').add('div').append(`${resp.name}: ${resp.age}岁，现有压岁钱${resp.money}元`)
                            // console.log(xhr.responseText);
                    }
                }
            }) */
            //封装Ajax
            // let url = 'http://*'
            // let dataGet = {
            //         id: 3,
            //         title: 'Hello Cyan'
            //     }
            // let dataPost = {
            //     name: 'cyan',
            //     age: 18,
            //     money: 123456
            // }
            // $('button').click(() => {
            // // GET()
            // myAjax.get(url, dataGet, (res) => {
            //     $('body').add('div').append('<br/>ID是:' + res.id + '<br/>消息是:' + res.title);
            // }, true);
            // // POST()
            // myAjax.post(url, dataPost, (res) => {
            //     console.log(res);
            //     $('body').add('div').append(`${res.name}: ${res.age}岁，现有压岁钱${res.money}元`);
            // }, true);
            // // ajax()
            // myAjax.ajax({
            //     method: 'post',
            //     url: url,
            //     query: dataPost,
            //     callback: (res) => {
            //         $('body').add('div').append(`${res.name}: ${res.age}岁，现有压岁钱${res.money}元`);
            //     },
            //     isJson: true
            // });
            // // 实操
            // myAjax.get('https://api.apiopen.top/getJoke', null, (res) => {
            //     let html = '';
            //     res.result.forEach((item) => {
            //         html += `
            //         ${item.text}<button data-id='${item.sid}'>查看作者</button><span style='display:none;'></span><br/>
            //         `
            //     });
            //     $('div').html(html);
            //     showAuth();
            // }, true)
            // function showAuth() {
            //     $('div button').on('click', function() {
            //         let sid = $(this).attr('data-id')
            //         myAjax.get('https://api.apiopen.top/getSingleJoke', {
            //             sid: sid
            //         }, (res) => {
            //             $(this).next().text(res.result.name).fadeToggle(100)
            //         }, true);
            //     });
            // }
            // myAjax.fetch('get', 'https://api.apiopen.top/getJoke', null).then(res => {
            //     let html = '';
            //     res.result.forEach((item) => {
            //         html += `
            //         ${item.text}<button data-id='${item.sid}'>查看作者</button><span style='display:none;'></span><br/>
            //         `
            //     });
            //     $('div').html(html);
            //     $('div button').on('click', function() {
            //         let sid = $(this).attr('data-id')
            //         myAjax.get('https://api.apiopen.top/getSingleJoke', {
            //             sid: sid
            //         }, (res) => {
            //             $(this).next().text(res.result.name).fadeToggle(100)
            //         }, true);
            //     });
            // }).catch(err => {
            //     console.log(err);
            // })
            // ES6原生fetch
            // fetch(`${url}?id=${dataGet.id}&title=${dataGet.title}`)
            //     .then((response) => {
            //         return response.json()
            //     })
            //     .then((myJson) => {
            //         console.log(myJson);
            //     })
            // })
        })
    </script>
</body>

</html>